<template>
    <div>
        <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>
        <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
            <el-table-column v-for="item of tableHeader" :prop="item" :label="item" :key="item"/>
        </el-table>
    </div>
</template>

<script>
import UploadExcelComponent from '@/components/tabExcel/UploadExcelComponent.vue'
export default {
    data(){
        return {
            tableData: [],
            tableHeader: []
        }
    },
    methods:{
        //在上传之前做一些自己的特殊判断。可以是固定写法
        beforeUpload(file){
            console.log(file)
            const isLt1M = file.size / 1024 / 1024 < 1
            if (isLt1M) {
                return true
            }
            this.$message({
                message: 'Please do not upload files larger than 1m in size.',
                type: 'warning'
            })
            return false
        },
        //上传成功以后。
        handleSuccess({results,header}){
            console.log(results)
            console.log(header)
            this.tableData = results
            this.tableHeader = header
        }
    },
    components:{
        UploadExcelComponent
    }
}
</script>

<style>

</style>